<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>乘车点管理</title>
    <meta name="decorator" content="default"/>
    <link href="${ctxStatic}/static_back/css/public.css" type="text/css" rel="stylesheet">
    <link href="${ctxStatic}/static_back/css/main.css" type="text/css" rel="stylesheet">
</head>

<body>
    <%--标题--%>
    <div class="top-section">
        <h2>乘车点管理</h2>
    </div>

    <div class="body-section white-body">
        <%--功能区--%>
        <form:form id="searchForm" modelAttribute="airRidePoint" action="${ctx}/air/airRidePoint/" method="post" >
        <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
        <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
        <div class="function-box">
            <div class="left-function">
                <form:input path="name" htmlEscape="false" class="function-ipt" placeholder="输入名称查询" />
                <input id="btnSubmit" class="btn btn-main" type="submit" value="查询"/>
            </div>
            <div class="right-function">
                <a href="${ctx}/air/airRidePoint/form" class="btn btn-blue">新增乘车点</a>
            </div>
        </div>
        </form:form>
        <sys:message content="${message}"/>

        <%--表格区--%>
        <div class="table-box">
            <table id="contentTable">
                <thead>
                <tr>
                    <th colspan="5" class="td-bb td-rb">基本信息</th>
                    <th colspan="3" class="td-bb td-rb">行程信息</th>
                    <th colspan="3" class="td-bb td-rb">配置信息</th>
                    <shiro:hasPermission name="air:airRidePoint:edit">
                    <th rowspan="2" width="14%">操作</th>
                    </shiro:hasPermission>
                </tr>
                <tr>
                    <th >名称</th>
                    <th width="5%">摄像头</th>
                    <th width="6%">负责人</th>
                    <th width="8%">联系电话</th>
                    <th width="6%" class="td-rb">对讲机</th>
                    <th width="6%">线路</th>
                    <th width="12%">目的地</th>
                    <th width="7%" class="td-rb">费用</th>
                    <th width="8%">专线巴士</th>
                    <th width="6%">司机</th>
                    <th width="8%" class="td-rb">工作人员</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${page.list}" var="airRidePoint">
                    <tr>
                        <td>
                            <a href="javascript:void(0)" class="details" data-id="${airRidePoint.id}">
                                ${airRidePoint.name}
                            </a>
                        </td>
                        <td>
                                ${airRidePoint.cameraSum}
                        </td>
                        <td>
                                ${airRidePoint.leader}
                        </td>
                        <td>
                                ${airRidePoint.phone}
                        </td>
                        <td class="td-rb">
                                ${airRidePoint.interphone}
                        </td>
                        <td>
                                <%--todo  补充线路编号--%>
                            <c:if test="${airRidePoint.route>0}">
                            ${airRidePoint.route} 号线
                            </c:if>
                        </td>
                        <td>
                                ${airRidePoint.airParkingLot.name}
                        </td>
                        <td class="td-rb">
                                ${airRidePoint.typeText}
                        </td>
                        <td>
                                ${airRidePoint.busSum}辆
                        </td>
                        <td>
                                ${airRidePoint.driverSum}人
                        </td>
                        <td class="td-rb">
                                ${airRidePoint.workerSum}人
                        </td>
                        <td class="td-center">
                            <shiro:hasPermission name="air:airRidePoint:edit">
                            <a href="javascript:void(0)" class="details font-link" data-id="${airRidePoint.id}">详情</a>
                            <a href="${ctx}/air/airRidePoint/form?id=${airRidePoint.id}" class="font-link">修改</a>
                            <a href="${ctx}/air/airRidePoint/delete?id=${airRidePoint.id}"
                               onclick="return confirmx('确认要删除该乘车点吗？', this.href)" class="font-link">删除</a>
                            </shiro:hasPermission>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div class="pagination table-pagination">${page}</div>
        </div>
    </div>

    <%--详情弹窗--%>
    <div id="detailDiv" class="window-layer window-details window-details-2">
        <div class="window-bg"></div>
        <div class="window-main">
            <div class="window-body">

                <%--主要信息--%>
                <div class="details-div">
                    <h3 id="air_rp_name"></h3>
                    <div class="info-box">
                        <ul class="info-list">
                            <li class="info-icon-position" title="乘车点位置">
                                <span id="air_rp_position"></span>
                            </li>
                            <li class="info-icon-person" title="乘车点负责人">
                                <span id="air_rp_leader"></span>&nbsp&nbsp
                                <span id="air_rp_phone"></span>
                            </li>
                            <li class="info-icon-talk" title="对讲机">
                                <span id="air_rp_interphone"></span>
                            </li>
                            <li class="info-icon-warning" title="候车预警">
                                <span id="air_rp_warn"></span>
                            </li>
                        </ul>
                        <ul class="info-data">
                            <li>
                                <span id="air_rp_busSum"></span>辆<br/>专线巴士
                            </li>
                            <li>
                                <span id="air_rp_seat"></span>个<br/>座位
                            </li>
                            <li>
                                <span id="air_rp_driverSum"></span>名<br/>司机
                            </li>
                            <li>
                                <span id="air_rp_workerSum"></span>名<br/>工作人员
                            </li>
                        </ul>
                    </div>
                    <div class="camera-list">
                        <div class="camera-box">
                            <object id="pointCamera1" type='application/x-vlc-plugin' events='True' width="100%" height="100%">
                                <param name='mrl' value='' />
                                <param name='volume' value='0' />
                                <param name='autoplay' value='true' />
                                <param name='loop' value='false' />
                                <param name='fullscreen' value='true' />
                            </object>
                        </div>
                        <div class="camera-box">
                            <object id="pointCamera2" type='application/x-vlc-plugin' events='True' width="100%" height="100%">
                                <param name='mrl' value='' />
                                <param name='volume' value='0' />
                                <param name='autoplay' value='true' />
                                <param name='loop' value='false' />
                                <param name='fullscreen' value='true' />
                            </object>
                        </div>
                        <div class="camera-box">
                            <object id="pointCamera3" type='application/x-vlc-plugin' events='True' width="100%" height="100%">
                                <param name='mrl' value='' />
                                <param name='volume' value='0' />
                                <param name='autoplay' value='true' />
                                <param name='loop' value='false' />
                                <param name='fullscreen' value='true' />
                            </object>
                        </div>
                        <div class="camera-box">
                            <object id="pointCamera4" type='application/x-vlc-plugin' events='True' width="100%" height="100%">
                                <param name='mrl' value='' />
                                <param name='volume' value='0' />
                                <param name='autoplay' value='true' />
                                <param name='loop' value='false' />
                                <param name='fullscreen' value='true' />
                            </object>
                        </div>
                    </div>
                    <div class="window-bottom">
                        <input type="button" class="btn" value="关闭" onclick="CloseDiv()"/>
                    </div>
                </div>

                <%--附属信息--%>
                <div class="subdetails-div">
                    <div class="info-box">
                        <h4>行程信息</h4>
                        <ul class="info-list">
                            <li class="info-icon-line" title="线路">
                                <span id="car_rp_line"></span>
                            </li>
                            <li class="info-icon-start" title="行程起点">
                                <span id="car_startpointName"></span>
                            </li>
                            <li class="info-icon-end" title="行程终点">
                                <span id="car_tarplace"></span>
                            </li>
                            <li class="info-icon-cost" title="行程费用">
                                <span id="air_rp_typeText"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="info-box">
                        <h4>预约乘车信息</h4>
                        <ul class="info-list">
                            <li class="info-icon-point">
                                11-09 已预约 <span class="point-num" id="appoint_nine">0</span> 人
                            </li>
                            <li class="info-icon-point">
                                11-10 已预约 <span class="point-num" id="appoint_ten">0</span> 人
                            </li>
                            <li class="info-icon-point">
                                11-11 已预约 <span class="point-num" id="appoint_eleven">0</span> 人
                            </li>
                        </ul>
                    </div>
                    <div class="info-box">
                        <h4>乘客运送信息</h4>
                        <ul class="info-list">
                            <li class="info-icon-point">
                                11-09 已运送 <span class="point-num" id="send_nine">0</span> 人
                            </li>
                            <li class="info-icon-point">
                                11-10 已运送 <span class="point-num" id="send_ten">0</span> 人
                            </li>
                            <li class="info-icon-point">
                                11-11 已运送 <span class="point-num" id="send_eleven">0</span> 人
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".details").click(function () {
                var val = $(this).data("id");
                var seat = getSeat(val);
                $.ajax({
                    url: "${ctx}/air/airRidePoint/getById",
                    type: "GET",
                    data: {id: val},
                    success: function (result) {
                        var arp = result.data;
                        console.log(arp);
                        $("#air_rp_name").html(arp.name);
                        $("#air_rp_position").html(arp.position);
                        $("#air_rp_leader").html(arp.leader);
                        $("#air_rp_phone").html(arp.phone);
                        $("#air_rp_interphone").html(arp.interphone);
                        var warn = "候车超过 " + arp.sliRetention + " 人为 轻微滞留，超过 " + arp.serRetention + " 人为 严重滞留";
                        $("#air_rp_warn").html(warn);
                        $("#air_rp_busSum").html(arp.busSum);
                        $("#air_rp_seat").html(seat);
                        $("#air_rp_driverSum").html(arp.driverSum);
                        $("#air_rp_workerSum").html(arp.workerSum);
                        $("#car_rp_line").html(arp.route + "号线");
                        $("#car_startpointName").html(arp.name);
                        if (typeof arp.airParkingLot !== "undefined") {
                            $("#car_tarplace").html(arp.airParkingLot.name);
                        }
                        $("#air_rp_typeText").html(arp.typeText);

                        // 启动视频
                        play("pointCamera1",arp.camera1);
                        play("pointCamera2",arp.camera2);
                        play("pointCamera3",arp.camera3);
                        play("pointCamera4",arp.camera4);
//                        play("pointCamera4","rtsp://admin:Thinkjoy2015@192.168.0.242:554/h264/ch1/main/av_stream");
                    }
                });
                $.ajax({
                    url: "${ctx}/air/airRidePoint/getCountById",
                    type: "GET",
                    data: {id: val},
                    success:function (result) {
                        var date = result.data;
                        $("#appoint_nine").html(date.appoint1+"");
                        $("#appoint_ten").html(date.appoint2+"");
                        $("#appoint_eleven").html(date.appoint3+"");
                        $("#send_nine").html(date.took1+"");
                        $("#send_ten").html(date.took2+"");
                        $("#send_eleven").html(date.took3+"");
                    }
                });
                $("#detailDiv").css("display", "block");

            });
        });

        function CloseDiv() {
            $("#detailDiv").css("display", "none");
            //结束所有监控视频
            stop("pointCamera1");
            stop("pointCamera2");
            stop("pointCamera3");
            stop("pointCamera4");
        }

        function page(n, s) {
            $("#pageNo").val(n);
            $("#pageSize").val(s);
            $("#searchForm").submit();
            return false;
        }

        function getSeat(id) {
            var seat = 0;
            $.ajax({
                url: "${ctx}/air/airRidePoint/getSeatById",
                type: "GET",
                data: {id: id},
                async:false,
                success: function (result) {
                    console.log(result);
                    seat = result.data;
                }
            });
            return seat;
        }

        //播放视频
        function play(id,href){
            var vlc = document.getElementById(id);
            vlc.playlist.clear();
            vlc.playlist.add(href);
            vlc.playlist.play();
        }

        //停止播放
        function stop(id){
            var vlc = document.getElementById(id);
            vlc.playlist.stop();
        }

    </script>

</body>
</html>